<template>
   <div id="header">
    <div id="header-l"> 
        <el-button  @click="handlerMenu" icon="el-icon-menu" ></el-button>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item  v-for="item in breads" :key="item.path"  :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
             
        </el-breadcrumb>

    </div>
    <div class="header-r">
        <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
               <img  :src="$store.state.userinfo.icon" alt="" >
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item ><p @click="tomyhome">我的主页</p></el-dropdown-item>
                <el-dropdown-item ><p @click="loginout">退出</p></el-dropdown-item>
                
            </el-dropdown-menu>
        </el-dropdown>

    </div>
    
   </div>
</template>

<script>
import Cookie from 'cookiejs'
import reqLogin  from '@/api/login/login'
export default {
   methods:{
    handlerMenu(){
        //隐藏侧边菜单
        this.$store.commit('handlerCollapse')
    },
    //退出登录
     loginout(){
      this.$confirm('确定要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //  //  //先把cookie清除
          //  Cookie.remove('token')
         const res =  await reqLogin.loginout()
         if(res.code==200){
              this.$router.push('/login')
              sessionStorage.removeItem('token')
              //清除面包屑和菜单数据
              this.$store.commit('removeAll')
              this.$store.commit('removeAllMenu')
             this.$message('已退出登录！');
         }else{
             this.$message(res.message)
         }
        })
        
     },
     //我的主页
     tomyhome(){
      this.$router.push('/myhome')
     }
   },
   computed:{
      breads(){
      return  this.$store.state.tab.breadMenu
      } 
   }
}
</script>

<style lang="less" scoped>
   #header{
    background-color: #333;
    height: 60px;
    padding:0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
   }
   /* #nowpath{
    color:#fff;
    font-size: 16px;
    margin:0 20px 0;
   } */
  img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  #header-l{
    display: flex;
    align-items: center;
    .el-breadcrumb {
        margin-left: 20px;
        font-size: 15px;
    }
 
  
  /deep/  .el-breadcrumb__item{
 
  .el-breadcrumb__inner{
    &.is-link{
    color:#c9c0c0
  }
  } 
  &:last-child{
    .el-breadcrumb__inner{
        color: #c0a80d;
    }
  }
}
/deep/  .el-breadcrumb__item{
 
 .el-breadcrumb__inner{
   &.is-link:hover{
   color:#c0a80d
 }
 } 
}
    }

 
</style>